<template>
  <div class="article">
    <Card>
      <!--留言详情-->
      <div class="type">
        <Divider/>
        <List item-layout="vertical">
          <ListItem v-for="talk in articleTalk" :key="talk.talk">
            <Card>
              {{talk.username}}
              <hr style="margin-bottom: 13px">
              {{talk.talk}}
            </Card>
          </ListItem>
        </List>
      </div>
      <!--评论-->
      <Talk :a_id="article.a_id"></Talk>
    </Card>

  </div>
</template>

<script>
import Talk from '../components/Talk'

export default {
  name: 'comment',
  components: {
    Talk
  },
  data() {
    return {
      article: {},
      articleTalk: [],
      id: '0',
    }
  },
  created: function () {
      this.$api.get('getArticle/' + this.id).then((res) => {
        if (res.code === 0) {
          this.article = res.data
          console.log(this.article)

        } else {
          this.info(res.message)
        }
        this.getArticleTalk(this.id)
      })


  },
  methods: {
    info(text) {
      this.$Notice.info({
        title: '提示',
        desc: text
      });
    },
    getArticleTalk() {
      //    获得所有评论
      this.$api.get('getArticleTalk/' + this.id).then((res) => {
        this.articleTalk = res.data
        console.log(this.articleTalk)
      })
    },
  },
}
</script>
<style>
.type {
  text-align: left;
}

.article {
  padding: 40px 10vw 40px 10vw;
}

.article-p {
  color: #ababab;
}

.article h2 {
  padding: 20px;
}

.article-text {
  padding: 20px 10vw 20px 10vw;
}
</style>